<template>
    <div class="video">
        <div class="videoPlayerTitle">
            <el-col :xs="15" :sm="17" :md="18" :lg="19" :xl="20">
                <i class="icon-third icon-third-jiankong"></i>
                <span>实时监控</span>
            </el-col>
            <el-col :xs="9" :sm="7" :md="6" :lg="5" :xl="4">
                <el-dropdown @command="changeScreen" style="background:rgba(0,0,0,.0);">
                    <span class="el-dropdown-link screenMenu" style="color: #fff;">
                        分屏方式：{{getMode()}}<i class="el-icon-arrow-down el-icon--right" ></i>
                    </span>
                    <el-dropdown-menu slot="dropdown"  >
                        <el-dropdown-item command=1>1分屏</el-dropdown-item>
                        <el-dropdown-item command=2>4分屏</el-dropdown-item>
                        <el-dropdown-item command=3>9分屏</el-dropdown-item>
                        <el-dropdown-item command=4>16分屏</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </div>
        <div class="videoPlayer" @mouseover="handleMouseover" @mouseout="handleMouseout">
            <Square :index="screenIndex" :streamUrl.sync="getUrl" :text.sync="getText"></Square>
            <!-- <div id="wrapper"></div> -->
            <!-- <transition name="slide-fade">
                <el-row class="cover" v-show="isActive">
                    <el-col :span="2">
                        <i class="icon-third icon-third-fenpingshezhi"></i>
                    </el-col>
                    <el-col :span="1" @click.native="changeScreen(1)">1x</el-col>
                    <el-col :span="1" @click.native="changeScreen(2)">4x</el-col>
                    <el-col :span="1" @click.native="changeScreen(3)">12x</el-col>
                    <el-col :span="1" @click.native="changeScreen(4)">16x</el-col>
                </el-row>
            </transition> -->
        </div>      
    </div>
	
</template>
<script>
import Square from "./Square.vue";
export default {
  components: {
    Square
  },
  props: {
    url: {
      type: String
    },
    text: {
      type: String,
      default: ""
    }
  },
  data: function() {
    return {
      isActive: true,
      screenIndex: 1
    };
  },
  computed: {
    getUrl: {
      get: function() {
        return this.url;
      },
      set: function(val) {
        this.$emit("update:url", val);
      }
    },
    getText: {
      get: function() {
        return this.text;
      },
      set: function(val) {
        this.text = val;
      }
    }
  },
  watch: {
    text(val) {
      if (val) {
        this.getText = val;
      }
    }
  },
  methods: {
    handleMouseover: function() {
      this.isActive = true;
    },
    handleMouseout: function() {
      this.isActive = false;
    },
    changeScreen(index) {
      this.screenIndex = parseInt(index);
    },
    getMode: function() {
      return this.getNumber(this.screenIndex) + "分屏";
    },
    getNumber(screenIndex) {
      let number = 1;
      switch (screenIndex) {
        case 1:
          number = 1;
          break;
        case 2:
          number = 4;
          break;
        case 3:
          number = 9;
          break;
        case 4:
          number = 16;
          break;
      }
      return number;
    }
  }
};
</script>

<style scoped lang="scss">
@import "../assets/basic.scss";
.video {
  width: 100%;
  height: 100%;
  /*border: 1px solid #ddddde;*/
  border-radius: 4px;
  overflow: hidden;
  background:url("/static/boxbg.png") no-repeat center;
  background-size:100% 100%;
  .videoPlayerTitle {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    /*background-color: #f7f7f7;*/
    color: #fff;
    //border-bottom: 1px solid #ddddde;
    span {
      padding-left: 5px;
    }
    .screenMenu {
      color: $ims-primary-color;
      outline: none;
    }
  }
  .videoPlayer {
    width: calc(90% - 20px);
    height: calc(95% - 55px);
    position: relative;
    padding:0 5%;
    left:10px;
    .cover {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #fff;
      background-color: $ims-primary-color;
      // background: rgba($color: #0095DA, $alpha: 1);
      z-index: 99999;
      img {
        width: 30%;
        height: 30%;
      }
      div {
        cursor: pointer;
        &:hover {
          color: #000;
        }
      }
    }
  }
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.5s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(10px);
  opacity: 0;
}
</style>